<template>
    <div id="BeijingRabkings" style="width: 45%;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.drawMap()

    },
    methods: {
        drawMap() {
            let myChart = echarts.init(document.getElementById('BeijingRabkings'));
            let data = [
                { name: "丰台区", value: 1205 },
                { name: "海淀区", value: 714 },
                { name: "大兴区", value: 503 },
                { name: "通州区", value: 386 },
                { name: "昌平区", value: 358 },
                { name: "朝阳区", value: 355 },
                { name: "房山区", value: 354 },
                { name: "顺义区", value: 279 },
                { name: "密云区", value: 238 },
                { name: "平谷区", value: 223 },
                { name: "怀柔区", value: 208 },
                { name: "门头沟区", value: 168 },
                { name: "石景山区", value: 156 },
                { name: "延庆区", value: 135 },
                { name: "西城区", value: 93 },
                { name: "东城区", value: 67 }
            ];
            // 遍历接口返回的数组拿到每个省的value值
            let value = data.map(item => item.value);
            // 计算最大值和最小值
            var maxValue = Math.max(...value);
            var minValue = Math.min(...value);
            // 定义柱状图的颜色
            const colorMapping = [
                { min: maxValue * 0.8, max: maxValue, color: 'red' },
                { min: maxValue * 0.5, max: maxValue * 0.8, color: 'orange' },
                { min: maxValue * 0.3, max: maxValue * 0.5, color: '#245fae' },
                { min: minValue, max: maxValue * 0.3, color: '#2c998d' },
            ]

            let option = {
                title: {
                    text: '北京企业地区排行',
                    subtext: '更新时间:2024-11-30 01:00:00',
                    top: 10,
                    x: 'left',
                    textStyle: {
                        color: '#000'
                    }
                },
                tooltip: {},
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                    data: data.map(item => item.name).reverse()
                },
                series: [
                    {
                        type: 'bar',
                        data:value.reverse(),
                        itemStyle: {
                            color: function (params) {
                                // 根据 value 值确定颜色
                                for (let i = 0; i < colorMapping.length; i++) {
                                    if (value[params.dataIndex] >= colorMapping[i].min && value[params.dataIndex] <= colorMapping[i].max) {
                                        return colorMapping[i].color;
                                    }
                                }
                            }
                        }
                    },
                ]
            };

            myChart.setOption(option);

        }

    }
}
</script>